<template>
  <div class="timeday-container">
      <el-card>
         <el-row type="flex" justify="space-around">
           <h2 v-if="inlist[0]">收入</h2>
           <h2 v-if="paylist[0]">支出</h2>
         </el-row>
         <el-row type="flex" justify="space-around">
           <span v-if="inlist[0]"> 
             <el-table 
             :data="inlist" 
              style="width:500px"
              :row-class-name="tableRowClassName"
              :header-cell-style="{'text-align':'center','background-color':'lightpink','color':'#fff','height': '50px'}" 
             >
             <el-table-column label="收入" prop="income" align="center"></el-table-column>
             <el-table-column label="来源" prop="info"  align="center"></el-table-column>
           </el-table>
           </span>
           <span v-if="paylist[0]">
             <el-table 
             :data="paylist"
              style="width:500px"
               :row-class-name="tableRowClassName"
       :header-cell-style="{'text-align':'center','background-color':'lightpink','color':'#fff','height': '50px'}"
               >
             <el-table-column label="支出" prop="payment" align="center"></el-table-column>
             <el-table-column label="来源" prop="info"  align="center"></el-table-column>
           </el-table>
           </span>
         </el-row>
      </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
        list: JSON.parse(localStorage.getItem('list')),
        timeday:this.$route.params.timeday,
        inlist:[],
        paylist:[]
    }
  },
  created () {
    this.fun()
  },
  mounted () {

  },
  methods: {
      fun(){
        //   console.log(this.list);
        //console.log(this.timeday);
     let newlist = this.list.filter(item=>(new Date(item.timeleave).getDate())==this.timeday)
    //  console.log(123123,this.newlist);
        this.inlist=newlist.filter(item=>item.income!==0)  // [0] ? newlist.filter(item=>item.income!==0) : [{income:'暂无收入',info:'暂无来源'}]
        this.paylist=newlist.filter(item=>item.payment!==0) // [0] ? newlist.filter(item=>item.payment!==0) : [{payment:'暂无支出',info:'暂无来源'}]
      },
      // 隔行变色
       tableRowClassName ({ row, rowIndex }) {
      return rowIndex % 2 == 0 ? 'warning-row' : 'success-row'
    },
  }
}
</script>

<style scoped>
.timeday-container{
    padding: 20px;
}
span{
  display: inline-block;
  width: 500px;
  height: auto;
}
.el-table .warning-row {
  background: oldlace !important;
}
.el-table .success-row {
  background: #e7e7e7 !important;
}

</style>
